<%-- 
    Document   : UserSetting
    Created on : 2011-9-11, 13:56:13
    Author     : Cong
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%@ taglib prefix="sx" uri="/struts-dojo-tags" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>User Setting</title>
        <link rel="stylesheet" type="text/css" href="resource/user_setting/style.css" />
        <script type="text/javascript" LANGUAGE="JavaScript" src="resource/user_setting/core.js"></script>
        <script type="text/javascript" LANGUAGE="JavaScript" src="resource/user_setting/tab.js"></script>
        <link rel="stylesheet" type="text/css" href="resource/cupertino/jquery-ui-1.8.16.cupertino.css"/>
        <script type="text/javascript" src="resource/jquery-1.6.2.min.js"></script>
        <script type="text/javascript" src="resource/jquery-ui-1.8.16.custom.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("button").button();
                $( "#date").datepicker({
                    dateFormat: 'dd/mm/yy',
                    changeMonth: true,
                    changeYear: true,
                    defaultDate: '-15y'
                });
            });
        </script>
        <%--        <script type="text/javascript">
                var result=false;
                function validate(theID)
                {
                    var old=$("#oldpwd").attr("value");
                    if(old=="")
                    {
                        result=true;
                        return result;
                    }
                    var url="validateAction_checkPlayer";
                    var params={account:theID,
                                password:old};
                    jQuery.post(url,params,function(data){
                    if(data.res==true)
                    {
                      result=true;
                      }
                    else
                      alert("Old Pass word is wrong");
                     },"JSON");
                     return result;
                }
                function check()
                {
                    var check=true;
                    var old=$("#oldpwd").attr("value");
                    var pwd=$("#password").attr("value");
                    var pwdConfirm=$("#check_pwd").attr("value");
                    if(old==""&&(pwd!=""||check_pwd!=""))
                    {
                        check=false;
                        alert("Please input the old password.");
                    }
                    if(old!="")
                    {
                        if(password.length<6||check_pwd.length<6)
                        {
                           check=false;
                           alert("The length of the password must longer than 6.");
                        }
                        if(pwd!=check_pwd)
                        {
                           check=false;
                           alert("New password are not the same.");
                        }
                    }
                    return check;
                }
                </script>--%>
        <sx:head />
    </head>

    <body>

        <div id="user-wrap">
            <div id="user-nav">
                <%@ include file="UserSettingHead.jsp" %>
            </div>
            <div id="user-main">

                <div class="u-m-bg"></div>

                <div class="u-m-bg-c cc">

                    <div class="p10">
                        <s:if test="updateSuccess">
                            <s:div cssClass="user-setting-updatemsg" >Update Complete</s:div>
                        </s:if>
                        <div class="u-nav-2 cc">
                            <ul id="infolist">
                                <li id="base"><a style="cursor:pointer" hidefocus="true" onclick="selectTab('base')">Basic Information</a></li>
                                <li id="face"><a style="cursor:pointer" hidefocus="true" onclick="selectTab('face')">Avatar</a></li>
                                <li id="safe"><a style="cursor:pointer" hidefocus="true" onclick="selectTab('safe')">Password</a></li>
                            </ul>
                        </div>
                        <div class="u-cont-bg-c">

                            <table width="100%" height="450">
                                <tr>
                                    <td class="vt">
                                        <%-- Basic Setting --%>
                                        <div class="p15" style="display:none" id="info_base">

                                            <form  action="UserAction_updateProfileBasic" method="post">

                                                <table width="100%" class="mt10 bor-t-c">
                                                    <tr class="user-tr">
                                                        <td width="150"> Name</td>
                                                        <td>
                                                            <s:property value="user.name" />
                                                            
                                                        </td>
                                                    </tr>
                                                    <tr class="user-tr">
                                                        <td width="150"> Gender</td>
                                                        <td>
                                                            <s:radio theme="simple" name="user.gender" list="#{1:' male ', 2:' female '}" />
                                                            <%--
                                                            <input type="radio" name="progender" value="1" /> male
                                                            <input type="radio" name="progender" value="2"  /> female
                                                            --%>
                                                        </td>
                                                    </tr>

                                                    <tr class="user-tr">
                                                        <td> Birthday</td>
                                                        <td>

                                                            <s:textfield name="dob" id="date"  theme="simple" size="12"/>
                                                            <%--
                                                            <input type="text" name="date" id="date" size="12"/>
                                                            --%>
                                                        </td>
                                                    </tr>

                                                    <tr class="user-tr">                                                    
                                                        <td>Faculty</td>
                                                        <td>
                                                            <s:textfield name="user.faculty" theme="simple" size="40" maxlength="14" />
                                                            <%--
                                                            <input class="input" type="text" size="20" maxlength="14" name="user.faculty" value="" />
                                                            --%>
                                                        </td>
                                                    </tr>

                                                    <tr class="user-tr">
                                                        <td>Email</td>
                                                        <td>
                                                            <s:textfield theme="simple" size="40" name="user.email"/>
                                                            <%--
                                                            <input class="input" type="text" size="40" name="signature" value="" />
                                                            --%>
                                                        </td>
                                                    </tr>

                                                    <tr class="user-tr">
                                                        <td>Self Description</td>
                                                        <td>
                                                            <s:textarea theme="simple" name="user.description" cols="50" rows="4" />
                                                            <%--
                                                            <textarea name="prointroduce" id="prointroduce" rows="4" cols="50"></textarea>
                                                            --%>
                                                            <br />
                                                            <span id="prointroduce_warn">Less than 1000 characters</span> 
                                                        </td>
                                                    </tr>

                                                </table>

                                                <div align="center">
                                                    <button type="submit">Save</button>
                                                </div>
                                            </form>

                                        </div>
                                        <%-- Basic Setting End --%>
                                        <%-- Avatar Setting --%>
                                        <div class="p15" style="display:none" id="info_face">
                                            <input type="radio" name="method" checked onclick="javascript:photo_avatar.style.display= 'block';photo_camera.style.display= 'none'; ">Upload file from your computer
                                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                            <input type="radio" name="method" onclick="javascript:photo_avatar.style.display= 'none';photo_camera.style.display= 'block'; ">Take a picture from your web camera
                                            <br/>
                                            <br/>
                                            <div id="photo_avatar"style="display:block" >
                                            <form action="UserAction_upload_avatar" method="post" enctype="multipart/form-data">
                                                <table width="100%" class="mt10 bor-t-c">
                                                    <tr class="user-tr">
                                                        <td width="120" style="vertical-align:top">
                                                            <img alt="" src="UserAction_get_avatar?uni=${uni}" width="200"/>
                                                        </td>
                                                    </tr>
                                                    <tr class="user-tr">
                                                        <td>
                                                            <p>Upload image to change your avatar</p>
                                                            <input type="file" name="avatar"/>
                                                        </td>
                                                    </tr>
                                                </table>
                                                <div align="center">
                                                    <button type="submit">Save</button>
                                                </div>
                                            </form>
                                            </div>
                                            <div id="photo_camera"style="position: relative; width: 575px; height:290px; overflow:hidden; display:none" >
                                                <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="600" height="300">
                                                <param name="quality" value="high">
                                                <embed src="resource/camera.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="575" height="290"></embed>
                                                </object>
                                            </div>
                                        </div>
                                        <%-- Avatar Setting End --%>
                                        <%-- Password Setting --%>                                      
                                        <div class="p15" style="display:none" id="info_safe">
                                            <form method="post" action ="UserAction_changePassword">
                                                <table width="100%" class="mt10 bor-t-c">
                                                    <tr class="user-tr">
                                                        <td width="150">Current password</td>
                                                        <td><s:password theme="simple" size="20" maxlength="75" name="oldpwd" /> </td>
                                                    </tr>
                                                    <tr class="user-tr">
                                                        <td>New password</td>
                                                        <td><s:password theme="simple"  size="20" maxlength="75" name="newpwd"/></td>
                                                    </tr>
                                                    <tr class="user-tr">
                                                        <td>Confirm password</td>
                                                        <td><s:password theme="simple"  size="20" maxlength="75" name="check_pwd"/></td>
                                                    </tr>
                                                </table>
                                                <div align="center">
                                                    <button type="submit">Save</button>
                                                </div>
                                            </form>
                                        </div>
                                        <%-- Password Setting End--%>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <script type="text/javascript" language="JavaScript">
            function selectTab(tab) {
                showTabs('infolist', tab, 'li', 'current');
                $('userbinding-node').style.display = (tab == 'binding') ? '' : 'none';
            }

                ~function() {
                var info_type = "${tab}";
                selectTab(info_type);
            }();
        </script>

    </body>

</html>
<%@ include file="ForumFoot.jsp" %>
